<template>
    <div style="float: right;">
        <el-form :model="queryForm" :inline="true">
            <el-form-item>
                <el-input v-model="queryForm.title" clearable placeholder="输入标题搜索">
                    <template #append>
                        <el-button type="primary" @click="forumInit()">查询</el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toPublish">发布一个</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="margin-top: 5%;">
        <!-- 每行四个 -->
        <el-row :gutter="20" v-for="list in forumList" :key="list" style="margin-top: 2%;">
            <!-- 四个中的每个 -->
            <el-col :span="6" v-for="forum in list" :key="forum">
                <el-card shadow="hover" style="max-height: 250px;" class="box-card" @click="handleDetail(forum)">
                    <el-image :src="imageBaseURL + forum.coverImage" class="" style="width: 100%; height: 150px;" fit="fill"/>
                    <div style="padding: 5px">
                        <p style="width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{forum.title}}</p>
                        <div class="bottom">
                            <time class="time">{{ forum.createTime }}</time>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { imageBaseURL } from "@/global"
const { proxy } = getCurrentInstance()

let forumList = ref([])
let queryForm = reactive({})
const forumInit = async () => {
	let param = Object.assign({}, queryForm)
	let result = await proxy.axios.post('forum/list', param)
	if (!result) {
	    return;
	}
	// Object.assign(forumList, result)
	forumList.value = result
}
forumInit()

const toPublish = () => {
	proxy.router.push('publish')
}

const handleDetail = (forum) => {
    console.log(forum)
	window.open('detail/' + forum.id)
}
</script>

<style lang="scss" scoped>
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
}
</style>